import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:yt_devops/components/app_bar/app_bar_widget.dart';
import 'package:yt_devops/components/card_wrap.dart';
import 'package:yt_devops/pages/devices/device_tab/utils/device_util.dart';
import 'package:yt_devops/styles/styles.dart';
import 'package:yt_devops/utils/enums.dart';
import 'electricity_meter_detail_controller.dart';
import 'electricity_meter_detail_model.dart';

class ElectricityMeterDetailPage
    extends GetWidget<ElectricityMeterDetailController> {
  ElectricityMeterDetailPage({Key? key}) : super(key: key);

  double sreenWidth = 343.w;

  @override
  Widget build(BuildContext context) {
    sreenWidth = MediaQuery.of(context).size.width - 60.w;
    return GetBuilder<ElectricityMeterDetailController>(
      builder: (_) => Scaffold(
        appBar: AppBarWidget.defaultAppBar(controller.title),
        body: StreamBuilder(
          stream: controller.dataStream,
          builder: (context, snapshot) => ListView(
            children: [
              CardWrap(
                padding: EdgeInsets.symmetric(horizontal: 16.w),
                child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      DeviceUtil.headTitle('市电负载'),
                      ...getGridRows(controller.gridList, snapshot.data)
                    ]),
              )
            ],
          ),
        ),
      ),
    );
  }

  List<Widget> getGridRows(
      List<ElectricityMeterModel> items, Map<String, dynamic>? dataSource) {
    List<Widget> rows = [], cols = [];
    int itemCount = items.length, index = 0;
    Widget container;
    while (index < itemCount) {
      List<Widget> cols = [];
      if (index + 1 < itemCount) {
        cols.addAll([
          getGridCell(items[index], dataSource, 0.53 * sreenWidth),
          getGridCell(items[index + 1], dataSource, 0.47 * sreenWidth)
        ]);
        index = index + 2;
      } else {
        cols.add(
          getGridCell(items[index], dataSource, 0.53 * sreenWidth),
        );
        index = index + 1;
      }
      container = Container(
        padding: EdgeInsets.only(bottom: 20.h),
        margin: EdgeInsets.only(top: 18.h),
        decoration: const BoxDecoration(
            border: Border(bottom: BorderSide(color: Colour.dividerColor))),
        child:
            Row(crossAxisAlignment: CrossAxisAlignment.start, children: cols),
      );
      rows.add(container);
    }
    return rows;
  }

  getGridCell(ElectricityMeterModel model, Map<String, dynamic>? dataSource,
      double width) {
    return SizedBox(
      width: width,
      child: Column(mainAxisAlignment: MainAxisAlignment.start, children: [
        Padding(
          padding: EdgeInsets.only(bottom: 8.h),
          child: Row(
            children: [
              Image.asset(
                model.icon,
                width: 24.w,
                height: 24.w,
              ),
              Padding(
                padding: EdgeInsets.only(left: 12.w, right: 0),
                child: Text(
                  model.title,
                  style: TextStyles.f14,
                ),
              )
            ],
          ),
        ),
        ...model.item.map((e) => Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                SizedBox(
                  width: 100.w,
                  child: Text(
                    '${e.label}：',
                    style: TextStyles.lf14.copyWith(height: 1.8),
                  ),
                ),
                Text(
                  dataSource?[e.field]?.toString() ?? '--',
                  style: controller.connectStatus == ConnectStatusType.on
                      ? TextStyles.f14
                      : TextStyle(
                          fontSize: 14.sp, color: Colour.offlineTextColor),
                )
              ],
            ))
      ]),
    );
  }
}
